 <template>
  <!-- 
1、选择器组件布局 
v-model的值为当前被选中的el-option的 value 属性值
2、组件列表数据渲染---组件传值：父传子
3、筛选功能实现:筛选后的新数组---传递到父组件,进行分页渲染
每一个筛选时，都应该将全部选项筛选好（第二次选择筛选功能，应该是上一次筛选过后的数组，第三次则是第二次筛选过后的数组）

后台发过来的总数据100
筛选后的数据
分页后的数据
  -->
  <div class="filters">
    <el-row
      type="flex"
      class="filters-top"
      justify="space-between"
      align="middle"
    >
      <el-col :span="8">
        单程： {{ data.info.departCity }} - {{ data.info.destCity }} /
        {{ data.info.departDate }}
      </el-col>

      <el-col :span="4">
        <!-- v-model的值为当前被选中的el-option的 value 属性值 -->
        <el-select
          size="mini"
          v-model="airport"
          placeholder="起飞机场"
          @change="runFilters"
        >
          <el-option
            v-for="(item, index) in data.options.airport"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-select
          size="mini"
          v-model="flightTimes"
          placeholder="起飞时间"
          @change="runFilters"
        >
          <el-option
            v-for="(value, index) in data.options.flightTimes"
            :key="index"
            :label="value.from + ':00' + '-' + value.to + ':00'"
            :value="value.from + ',' + value.to"
          >
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-select
          size="mini"
          v-model="company"
          placeholder="航空公司"
          @change="runFilters"
        >
          <el-option
            v-for="(value, index) in data.options.company"
            :key="index"
            :label="value"
            :value="value"
          >
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-select
          size="mini"
          v-model="airSize"
          placeholder="机型"
          @change="runFilters"
        >
          <!-- <el-option label="大" value="大"> </el-option> -->
          <el-option
            v-for="(value, index) in AirSize"
            :key="index"
            :label="value.label"
            :value="value.value"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <div class="filter-cancel">
      筛选：
      <el-button
        type="primary"
        round
        plain
        size="mini"
        @click="handleFiltersCancel"
      >
        撤销
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      // 机型数组
      AirSize: [
        {
          label: "大",
          value: "L",
        },
        {
          label: "中",
          value: "M",
        },
        {
          label: "小",
          value: "S",
        },
      ],
      airport: "", //机场
      flightTimes: "", //起飞时间
      company: "", // 航空公司
      airSize: "", //机型
      //   新数组
      newList: [],
    };
  },
  mounted() {
    console.log(this.data);
  },
  methods: {
    //   筛选功能
    runFilters() {
      let flights = [...this.data.flights];
      if (this.airport) {
        flights = this.handleAirport(flights);
        console.log(flights);
      }
      if (this.flightTimes) {
        flights = this.handleFlightTimes(flights);
        console.log(flights);
      }
      if (this.company) {
        flights = this.handleCompany(flights);
        console.log(flights);
      }
      if (this.airSize) {
        flights = this.handleAirSize(flights);
        console.log(flights);
      }
      this.$emit("setAirList", flights);
    },
    //机场触发
    handleAirport(flights) {
      //   console.log(value);
      const newList = flights.filter((item) => {
        return item.org_airport_name == this.airport;
      });
      //   console.log(this.newList);
      //   this.$emit("setAirList", this.newList);
      return newList;
    },
    //起飞时间触发
    handleFlightTimes(flights) {
      const from = Number(this.flightTimes.split(",")[0]);
      const to = Number(this.flightTimes.split(",")[1]);
      const newList = flights.filter((item) => {
        const depTime = Number(item.dep_time.split(":")[0]);
        return depTime >= from && depTime < to;
      });
      //   console.log(this.newList);
      //   this.$emit("setAirList", this.newList);
      return newList;
    },
    // 航空公司触发
    handleCompany(flights) {
      const newList = flights.filter((item) => {
        return item.airline_name == this.company;
      });
      //   console.log(this.newList);
      //   this.$emit("setAirList", this.newList);
      return newList;
    },
    //机型触发
    handleAirSize(flights) {
      const newList = flights.filter((item) => {
        return item.plane_size == this.airSize;
      });
      //   console.log(this.newList);
      //   this.$emit("setAirList", this.newList);
      return newList;
    },
    // 撤销
    handleFiltersCancel(value) {
      this.airport = "";
      this.flightTimes = "";
      this.company = "";
      this.airSize = "";
      this.newList = this.data.flights;
      this.$emit("setAirList", this.newList);
    },
  },
};
</script>

<style>
</style>